<template>
    <div class="song2">
        <div class="rate">
            <div class="cur2" ref="progress">
                <div class="cur" :style="{ 'width': `${size + '%'}` }" ref="cur">
                    <span class="circle" ref="dot" @mousedown="startProgress" @mousemove="moveProgress"
                        @mouseup="stopProgress"></span>
                </div>
            </div>
        </div>
        <div class="song">
            <div>
                <LryicDetail></LryicDetail>
            </div>
            <div>
                <LryicMusic></LryicMusic>
            </div>
            <div>
                <LryicLists class="platLists"></LryicLists>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import LryicDetail from './LryicDetail.vue';
import LryicMusic from './LryicMusic.vue'
import LryicLists from './LryicLists.vue';

import { Ref, ref, watch } from 'vue'
import { musicPlay } from '@/stores/music'

// :style="{ 'left': `calc(${size + '%'} - 30px)` }"
const music = musicPlay()
let size = ref<any>(0)
// 进度条按下和弹起
const isClick = ref(false)

const getUpdatedProgress = (audioCurrent: number, audioDuration: number) => {
    // console.log(audioCurrent)
    // console.log(audioDuration / 1000)

    if (isClick.value) return
    size.value = audioCurrent / (audioDuration / 1000) * 99;
    if (Number.isNaN(size.value)) {
        size.value = 0
    } else if (audioCurrent + 0.5 >= audioDuration / 1000) {
        if (music.index == music.laterMusic.length) {
            music.StopOrPlay()
        } else {
            music.NextOrPrev(1)
        }
    }
}

watch(() => music.audioCurrent, (newValue) => {
    getUpdatedProgress(music.audioCurrent, music.audioDuration)
}, { deep: true, immediate: true })


/* 检测进度条 */

const progress: Ref<HTMLDivElement | null> = ref(null)
const dot: Ref<HTMLDivElement | null> = ref(null)
const cur: Ref<HTMLDivElement | null> = ref(null)
const musicProgress = ref(0)

const startProgress = () => {
    isClick.value = true
}
const stopProgress = () => {
    music.playingProgress2(musicProgress.value)
    isClick.value = false
}
const moveProgress = (event: MouseEvent) => {
    if (isClick.value && progress.value && dot.value && cur.value) {
        const containerRect = progress.value.getBoundingClientRect()
        const circleRect = dot.value.getBoundingClientRect()
        const x = event.clientX - containerRect.x - circleRect.width / 2
        musicProgress.value = x / containerRect.width * 100

        if (musicProgress.value < 0) {
            musicProgress.value = 0
        } else if (musicProgress.value > 100) {
            musicProgress.value = 100
        }

        cur.value.style.width = musicProgress.value + '%'

        music.playingProgress(musicProgress.value)
    }
}

</script>

<style lang="scss" scoped>
.song2 {
    width: 100%;
    height: 100%;
    background-color: var(--lyricFootColor);
    padding-left: var(--lyricMargin);
    padding-right: var(--lyricMargin);
    box-shadow: 0px -50px 120px 0 var(--lyricFootColor);
    display: grid;
    grid-template-rows: 20px 1fr;

    .song {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        height: 80px;
        // margin-left: var(--commonMarginLeft);
        min-width: 900px;
        // padding-right: var(--commonMarginLeft);
    }

    .rate {
        display: flex;
        align-items: center;
        width: 100%;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        // border-top: 5px solid var(--rateColor);
        // background-color: aqua;

        .cur2 {
            width: 100%;
            height: 1px;
            border: 3px solid var(--rateColor);
            padding-right: 50px;
            position: relative;
        }

        .cur {
            position: absolute;
            background-color: black;
            max-width: 98.5%;
            width: 0;
            height: 5px;
            top: -2px;
            left: 0;

            .circle {
                right: -15px;
                top: -5px;
                position: absolute;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background-color: black;
                cursor: pointer;
                // transition: left 1s linear;
                z-index: 0;
            }
        }
    }
}
</style>